<template>
    <div class="icon-wrap">
        <a-input
                class="no-select"
                :placeholder="placeholder"
                readonly
                v-model:value="form.label"
                @click="onShow"
        >
            <template #prefix v-if="form.value">
                <img class="suffix-img" :src="form.value" alt=""/>
            </template>
            <template #suffix>
                <RedoOutlined class="icon-refresh" @click="randIcon"/>
            </template>
        </a-input>
        <div class="icon-panel shadow-lg no-select" v-show="state">
            <div class="app-row">
                <div
                        class="app-col-md2 app-col-sm3 app-col-xs4 text-center icon-item"
                        :class="index === idx ? 'active' : ''"
                        v-for="(val, idx) in list"
                        :key="idx"
                        @click="tapIcon(idx)"
                >
                    <img class="item-img" :src="val.url" :alt="val.title">
                    <div class="item-text">{{val.title}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {RedoOutlined} from '@ant-design/icons-vue';
    import {getRandomInteger} from '/src/util/index';

    export default {
        name: "IconSelect",
        props: {
            value: {
                type: String,
                default: '',
            }
        },
        components: {
            RedoOutlined,
        },
        data() {
            return {
                state: false,
                placeholder: '请选择',
                list: [],
                index: null,
                form: {
                    value: '',
                    label: '',
                },
            }
        },
        created() {
            this.init();
        },
        mounted() {

        },
        methods: {
            init() {
                this.getIcon(true);
            },
            onShow() {
                // console.log('onShow');
                this.state = !this.state;
            },
            // 获取图标数据
            getIcon(refresh = false) {
                let that = this;
                that.$store.dispatch('getIcon', refresh).then(list => {
                    that.list = list;
                    that.defaultValue(that.value);
                });
            },
            // 选择图标
            tapIcon(index) {
                let that = this;
                // console.log('tapIcon', index);
                that.setValue(index);
                that.onShow();
            },
            // 随机
            randIcon() {
                let that = this,
                    max = that.list.length,
                    index = getRandomInteger(0, max);
                that.setValue(index);
            },
            // 设置form值
            setValue(index = null) {
                let that = this,
                    list = that.list,
                    row = index != null ? list[index] : null,
                    label = row && row.title ? row.title : '',
                    value = row && row.url ? row.url : '';

                that.index = index;
                that.form = {
                    label: label,
                    value: value,
                }
                // console.log('setValue', that.form);
                that.$emit('change', that.form);
            },
            // 选中默认值
            defaultValue(value) {
                let that = this,
                    list = that.list;
                if (value) {
                    list.forEach((item, index) => {
                        if (item.url === that.value) {
                            that.setValue(index);
                        }
                    })
                } else {
                    that.setValue();
                }
            },
        },
        watch: {
            value(val, old) {
                // console.log('watch', val, old);
                this.defaultValue(val);
            },
        }
    }
</script>

<style lang="less" scoped>
    .icon-wrap {
        position: relative;
        z-index: 111;

        .suffix-img {
            width: 16px;
            height: 16px;
        }

        .icon-refresh {
            cursor: pointer;
        }

        .icon-panel {
            padding: 10px;
            width: 100%;
            max-height: 300px;
            overflow-y: auto;
            position: absolute;
            border-radius: 2px;
            top: 35px;
            left: 0;
            background-color: white;
            transition: all .3s ease;

            .icon-item {
                cursor: pointer;
                transition: all .3s ease;
                border-radius: 6px;
                padding: 5px 0;

                &.active {
                    background-color: #f3f3f3;
                }

                &:hover {
                    background-color: #f3f3f3;

                    .item-text {
                        color: black;
                    }
                }

                .item-img {
                    width: 28px;
                    height: 28px;
                }

                .item-text {
                    color: #7b7b7b;
                    font-size: 13px;
                    transition: all .3s ease;
                }
            }
        }
    }
</style>
